<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="任务实例运行日志">
        <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
          <template #statusSlot="{ model, field }">
            <n-input v-model:value="model[field]" />
          </template>
        </BasicForm>
      </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-data-table :loading="pageLoading" :columns="columns" :data="tableData" :bordered="false"></n-data-table>
      <div class="custom-page" style="margin-top: 15px;">
        <n-pagination v-model:page="index" :page-count="totalPages" @change="updatePage" />
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, h, onMounted } from 'vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { NTag } from 'naive-ui';
import { instanceList } from '@/api/job/job';
import { MossJobEnum } from '@/enums/mossJobEnum';
const pageLoading = ref<boolean>(false);
const tableData = ref<any[]>([]);
const index = ref<number>(1);
const pageSize = ref<number>(10);
const totalPages = ref<number>(0);
const pageParams = { appId: MossJobEnum.APPID, page: index.value, pageSize: pageSize.value, type: "NORMAL" };
const instanceStatusOptions = [
        { value: "", label: '全部' },
        { value: "WAITING_DISPATCH", label: '等待派发' },
        { value: "WAITING_WORKER_RECEIVE", label: '等待Worker接收'},
        { value: "RUNNING", label: '运行中' },
        { value: "FAILED", label: '失败' },
        { value: "SUCCEED", label: '成功' },
        { value: "CANCELED", label: '手动取消' },
        { value: "STOPPED", label: '手动停止' }
      ]
const columns = [
  {
    title: '任务ID',
    key: 'jobId'
  },
  {
    title: '任务名称',
    key: 'jobName'
  },
  {
    title: '任务实例ID',
    key: 'instanceId'
  },
  {
    title: '状态',
    key: 'status',
    render(row) {
      return h(
        NTag,
        {
          type: row.status === 1 ? 'warning' : (row.status === 4 ? 'error' : 'success'),
        },
        {
          default: () => (row.status === 1 ? '等待派发' : (row.status === 4 ? '失败' : '成功')),
        }
      );
    }
  },
  {
    title: '触发时间',
    key: 'actualTriggerTime',
  },
  {
    title: '结束时间',
    key: 'finishedTime'
  },
  {
    title: '任务跟踪器地址',
    key: 'taskTrackerAddress'
  },
  {
    title: '总共执行的次数',
    key: 'runningTimes'
  },
];

/**
 * 表格查询参数定义
 */
const schemas: FormSchema[] = [
  {
    field: 'jobId',
    component: 'NInput',
    label: '任务ID',
    componentProps: {
      placeholder: '请输入任务ID',
    },
  },
  {
    field: 'instanceId',
    component: 'NInput',
    label: '实例ID',
    componentProps: {
      placeholder: '请输入实例ID',
    },
  },
  {
    field: 'status',
    component: 'NSelect',
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
      options: instanceStatusOptions,
    },
  },
];
/**
 * 表格查询注册
 */
const [register, { getFieldsValue }] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});
/**
 * 查询
 */
const handleSubmit = () => {
  instanceListApi(pageParams);
}
/**
 * 重置查询
 */
function handleReset() {
  instanceListApi(pageParams);
}
/**
 * 实例列表
 */
const instanceListApi = async (res) => {
  pageLoading.value = true;
  res.index = res.page - 1;
  const data = await instanceList({ ...getFieldsValue(), ...res });
  tableData.value = data.data;
  totalPages.value = data.totalPages;
  index.value = data.index + 1;
  pageSize.value = data.pageSize;
  pageLoading.value = false;
};
/**
 * 页码切换
 * @param page 
 */
const updatePage = (page) => {
  pageParams.page = page;
  instanceListApi(pageParams);
}
onMounted(() => {
  instanceListApi(pageParams);
});
</script>

<style lang="less" scoped></style>
